<script setup lang="ts">
import { ref, computed } from 'vue'
// import {defineProps, defineEmits } from 'vue'
// 引入父组件传递过来的数据类型 以及 emits中定义的方法
import { appProps,appEmits } from '../types/helloWorld'

// 接收父组件传递过来的数据
defineProps<appProps>()

// 创建emit对象
const emit = defineEmits<appEmits>()

const count = ref<number>(0)

const dbCount = computed((): string => {
  return (count.value * 2).toString()
})

const updateAppTitle = () => {
  // 向父组件发送自定义事件
  emit('send-title','hello组件修改的title')
}

const updateAppTitleSecond = () => {
  // 向父组件发送自定义事件
  emit('send-title-second',222222)
}

</script>

<template>
  <h1>{{ msg }}</h1>
  <h3>dbCount: {{ dbCount }}</h3>
  <h3>父组件传过来的title: {{ title }}</h3>
  <button @click="updateAppTitle">子传父按钮11</button>
  <button @click="updateAppTitleSecond">子传父按钮22</button>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>

</template>

<style scoped></style>
